<template>
    <div class="take-address">

        <div id="content">
            <cube-scroll v-if="list.length > 0">
                <dl v-for="(item,index) in list" :key="item.id" @click="clickDl(index)">
                    <dt>
                        <span>{{item.name}}</span><span>{{item.phone}}</span>
                        <p v-if="item.normal === '1'">默认</p>
                    </dt>
                    <dd>{{item.area}} {{item.address}}</dd>
                </dl>
            </cube-scroll>
            <empty v-else>暂无地址</empty>
        </div>

        <div id="footer">
            <router-link class="a" to="edit/0">
                <i class="iconfont icon-jia"></i> 添加地址
            </router-link>
        </div>

        <!--S子页面-->
        <transition :name="transition_name">
            <router-view class="children" />
        </transition>
        <!--E子页面-->
    </div>
</template>

<script>
    import plugin from "../../../util/plugin";
    import empty from "../../../components/empty/Empty";
    import store from "../../../store/index";
    export default {
        name: "take-address",
        data(){
            return {
                select:0,  //是否为选择
                api:"",
                transition_name:"",
                list:[],  //列表数据
                handle_index:0  //操作的下标
            }
        },
        components:{
            empty
        },
        beforeRouteUpdate(to, from, next){
            this.transition_name = to.path.split('/').length < from.path.split('/').length ? "animate__animated animate__slideOutRight animate__faster animate__delay-2s" : "animate__animated animate__slideInRight animate__faster animate__delay-2s";
            setTimeout(()=>{
                next();
            },10);
        },
        watch:{
          "$route"(to,from){
              if(from.name === "create-take-address-edit"){
                  this.getList();
              }
          }
        },
        created(){
          let {select} = this.$route.params;
          this.select = parseInt(select);
        },
        mounted() {
            this.getList();
        },
        methods:{
            // Run
            /**
             * 获取地址列表
             */
            getList(){
                plugin.getApi("address")
                .then((api)=>{
                    this.api = api;
                    this.$url("address/getList",{
                        uid:this.$sysinfo.uid
                    },api)
                    .then((res)=>{
                        if(res.data.status === "success"){
                            this.list = res.data.data;
                        }else{
                            this.list = [];
                        }
                    })
                })
            },

            // Handle
            /**
             * 点击dl显示操作面板
             * @param index
             */
            clickDl(index){
                this.handle_index = index;
                let data = [
                    {
                        content:"编辑",
                        value:"edit"
                    },
                    {
                        content:`<span style="color:red;">删除</span>`,
                        value:"delete"
                    }
                ];
                if(this.list[index].normal === '0'){
                    data.unshift({
                        content:"设为默认",
                        value:"normal"
                    });
                }
                if(this.select === 1){
                    data.unshift({
                        content:"选择",
                        value:"select"
                    });
                }
                this.$createActionSheet({
                    title: '操作',
                    data,
                    onSelect: (item, index) => {
                        switch(data[index].value){
                            case "edit":
                                this.$router.push("edit/"+this.list[this.handle_index].id);
                                break;
                            case "delete":
                                this.delete();
                                break;
                            case "normal":
                                this.setNormal();
                                break;
                            case "select":
                                store.commit("setTakeAddress",this.list[this.handle_index]);
                                this.$router.go(-1);
                                break;
                        }
                    }
                }).show();
            },
            /**
             * 删除
             */
            delete(){
                let handle = this.list[this.handle_index];
                this.$url("address/del",{
                    address_id:handle.id,
                    uid:this.$sysinfo.uid
                },this.api)
                .then((res)=>{
                    if(res.data.status === "success"){
                        this.getList();
                    }
                });
            },
            /**
             * 设置默认
             */
            setNormal(){
                let handle = this.list[this.handle_index];
                this.$url("address/setNormal",{
                    address_id:handle.id,
                    uid:this.$sysinfo.uid
                },this.api)
                    .then((res)=>{
                        if(res.data.status === "success"){
                            this.getList();
                        }
                    });
            }
        }
    }
</script>

<style scoped lang="less" src="./takeAddress.less"></style>
